<template>
  <a-modal title="定位" v-model:visible="showModal" :mask-closable="false" width="45vw" unmount-on-close>
    <div class="car-msg" v-if="cargps">
      <div class="msg-top">
        <div class="lic">{{ car.licenseNo }}</div>
        <div class="car-status">
          <div>{{ cargps.onLineStateStr || '-' }}</div>
          <template v-if="cargps.offlineTime">
            <div class="divider"></div>
            <div
              >离线时间：<span>{{ cargps.offlineTime }}</span></div
            >
          </template>
        </div>
      </div>
      <div class="car-other">车型：{{ cargps.modelName || '-' }}</div>
      <div class="car-other"
        >地址：<span v-if="cargps.address">{{ cargps.address }}</span></div
      >
      <div id="mapContainer" class="map"></div>
    </div>
    <a-empty v-else description="暂无该车辆信息" />

    <template #footer>
      <a-button @click="onClose">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup>
  import { loadMapScript } from '@/utils/loadMap'

  import { ref, nextTick } from 'vue'
  import { vehicleGPS, vehicleDetail } from '@/api/asset/vehicle'

  const map = ref(null)
  const showModal = ref(false)

  const show = (id) => {
    getDetail(id)
    showModal.value = true
  }

  const onClose = () => {
    showModal.value = false
    cargps.value = null
  }

  // 获取gps数据
  const cargps = ref(null)

  const getgps = () => {
    vehicleGPS({ licenseNo: car.value.licenseNo, vehicleNum: car.value.vehicleNum }).then((res) => {
      cargps.value = res.result

      // 加载地图
      loadMapScript().then(() => {
        nextTick(() => {
          init()
        })
      })
    })
  }

  // 获取车辆详情
  const car = ref({})
  const getDetail = (id) => {
    vehicleDetail({ id: id }).then((res) => {
      car.value = res.result
      getgps()
    })
  }

  const init = async () => {
    await polyfillNewMap()
  }

  // 初始化地图
  const polyfillNewMap = (config = {}, containerId = 'mapContainer') => {
    const { center = [cargps.value.longitudeGcj, cargps.value.latitudeGcj], zoom = 16 } = config
    map.value = new AMap.Map(containerId, {
      center,
      zoom,
      ...config,
    })

    var geocoder = new AMap.Geocoder({
      city: '全国', //城市设为北京，默认：“全国”
      radius: 500, //范围，默认：500
    })

    geocoder.getAddress([cargps.value.longitudeGcj, cargps.value.latitudeGcj], function (status, result) {
      if (status === 'complete' && result.regeocode) {
        var address = result.regeocode.formattedAddress
        cargps.value.address = address
      } else {
        log.error('根据经纬度查询地址失败')
      }
    })

    // 创建一个 Icon
    var startIcon = new AMap.Icon({
      // 图标尺寸
      size: new AMap.Size(25, 35),
      // 图标的取图地址
      image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
      // 图标所用图片大小
      imageSize: new AMap.Size(25, 35),
      // 图标取图偏移量
      // imageOffset: new AMap.Pixel(-9, -3)
    })

    // 将 icon 传入 marker
    var startMarker = new AMap.Marker({
      position: new AMap.LngLat(cargps.value.longitudeGcj, cargps.value.latitudeGcj),
      icon: startIcon,
      offset: new AMap.Pixel(-13, -30),
    })

    map.value.add([startMarker])
  }

  defineExpose({
    show,
    map,
  })
</script>

<style lang="less" scoped>
  .car-msg {
    width: 100%;
    padding: 16px;
    background: #f7f8fa;
    .msg-top {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .lic {
        font-size: 18px;
        color: var(--color-text-1);
        font-weight: 600;
      }
      .car-status {
        margin-left: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        height: 28px;
        background: #fff9e8;
        border-radius: 2px;
        color: #e45800;
        font-size: 14px;
        .divider {
          width: 1px;
          background-color: #f7eac4;
          height: 100%;
          margin: 0 8px;
        }
      }
    }
    .car-other {
      font-size: 14px;
      color: #1d2129;
      margin-top: 8px;
    }
  }

  .map {
    width: 100%;
    height: 333px;
  }

  // padding: 0 60px;
  :deep(.arco-row) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  :deep(.arco-modal-body) {
    padding: 10px 80px !important;
  }
  :deep(.arco-col) {
    padding: 0 !important;
  }
</style>
